import React, { useState } from 'react'
import { sendCode, codeLogin, sendMsg } from '../../../api/csy/api'
import '../css/login/qrcode.less'
import { UserOutlined } from '@ant-design/icons';
import { Input, Button, message, Form } from 'antd';
import { useNavigate } from 'react-router-dom';
interface Props {
    changeShow: (val: number) => void
}
import Yzmconde from './yzmcode'
const Qrcode: React.FC<Props> = ({ changeShow }) => {
    const [phone, setPhone] = useState<string>('')
    const [codes, setCodes] = useState('')

    //获取的验证码
    const [code, setCode] = useState('')
    const [num, setNum] = useState(5)

    // 验证手机号格式的正则表达式
    const phoneRegex = /^[1]([3-9])[0-9]{9}$/;

    const dian = () => {
        changeShow(0)
    }
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate()
    const login = () => {
        if (phone == '' || codes == '') {
            messageApi.open({
                type: 'warning',
                content: '请输入完整信息',
            });
            return
        } else {
            if (code == codes) {
                codeLogin({ phone }).then(res => {
                    if (res.data.code == 200) {
                        localStorage.setItem('userId', res.data.data.data.phone)
                        localStorage.setItem('accessToken', res.data.data.accessToken)
                        localStorage.setItem('refreshToken', res.data.data.refreshToken)
                        messageApi.open({
                            type: 'success',
                            content: '登录成功',
                        });
                        navigate('/home/ErrorCaptured')
                    }
                })
            } else {
                alert('验证码错误')
            }
        }
    }
    //发送验证码
    const sendCode1 = () => {
        if (phone === '') {
            alert('请输入手机号');
        } else {
            sendMsg({ phone }).then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    setCode(res.data.data);  // 设置验证码
                    setNum(5);  // 重置倒计时
                }
                // 开始倒计时
                const timer = setInterval(() => {
                    setNum((prev) => {
                        if (prev === 1) {  // 在倒计时到0时清除定时器
                            clearInterval(timer);
                            return 5;  // 重置num为5
                        }
                        return prev - 1;
                    });
                }, 1000);
            });
        }
    };


    const dianji = (val: number) => {
        console.log(val);

        changeShow(val)
    }

    return (
        <>
            <div className={`login_box_right `}>
                <span style={{
                    fontSize: '3.5rem',
                    fontWeight: 'bold',
                    position: 'fixed',
                    right: '0',
                    /* 三角形裁剪 */
                    clipPath: 'polygon(100% 100%, 0% 0%, 100% 0%)',
                    /* 透明度 */
                    opacity: '0.5',
                }} className="iconfont icon-a-computerdiannaojisuanji aaa" onClick={dian}></span>

                <div className='login_box_right_title1'>
                    <span>短信登录</span>
                </div>
                <div className='denbox'>
                    <Form
                        name="login"
                        initialValues={{ remember: true }}
                        onFinish={login}
                        layout="vertical"
                        style={{ marginBottom: '0rem' }}
                    >
                        <Form.Item
                            name="phone"
                            // label="账号"
                            rules={[
                                { required: true, message: '请输入手机号' },
                                { pattern: phoneRegex, message: '请输入有效的手机号' },
                            ]}

                        >
                            <Input value={phone} onChange={(e) => setPhone(e.target.value)}
                                size="large" className='login_box_right_input'
                                placeholder="请输入账号" prefix={<UserOutlined />} />

                        </Form.Item>
                        <Form.Item
                            name="code"
                            rules={[
                                { required: true, message: '请输入验证码' },

                            ]}
                        >
                            <Input size="large" value={codes}
                                onChange={(e) => setCodes(e.target.value)}
                                className='_input' placeholder="请输入验证码" />
                            {
                                num === 5 ? <button
                                    className='btncode' onClick={sendCode1}>验证码</button> : <span className='dspan'>{num}</span>
                            }

                        </Form.Item>
                        <Yzmconde></Yzmconde>

                        <Button onClick={login} className='login_box_right_button' type="primary" block>
                            登录
                        </Button>
                        <div className='box_right_span'>
                            {/* <span className='login_box_right_span' onClick={() => dianji(1)}>立即注册</span>
                            <span className='login_box_right_span' onClick={() => dianji(4)}>忘记密码</span> */}
                        </div>
                    </Form>
                    {contextHolder}
                </div>


            </div>

        </>
    )
}

export default Qrcode